<div id="dianpuManager<?php echo $uniqid;?>" class="dianpuManager" style="padding: 20px">
  <el-row :gutter="20" justify="center" align="middle">
    <el-col :span="4">店铺名称：</el-col>
    <el-col :span="20">{{params.name}}</el-col>
  </el-row>
  <el-row :gutter="20" justify="center" align="middle">
    <el-col :span="4">店铺企业：</el-col>
    <el-col :span="20">{{params.company_name}}</el-col>
  </el-row>
  <el-row :gutter="20" justify="center" align="middle">
    <el-col :span="4">店铺法人：</el-col>
    <el-col :span="20">{{params.company_representative_name}}</el-col>
  </el-row>
  <el-row :gutter="20" justify="center" align="middle">
    <el-col :span="4">店铺联系电话：</el-col>
    <el-col :span="20">{{params.phone}}</el-col>
  </el-row>
  <el-row :gutter="20" justify="center" align="middle">
    <el-col :span="4">店铺店长：</el-col>
    <el-col :span="20">{{rootManager.name}}（{{rootManager.phone}}）</el-col>
  </el-row>
  <el-row :gutter="20" justify="center" align="middle">
    <el-col :span="4">店铺店员：</el-col>
    <el-col :span="20">
      <el-table
              :data="member_names"
              style="width: 100%" :stripe="true" :border="true" size="small" empty-text="暂无店员">
        <el-table-column
                prop="id"
                label="会员ID"
                width="80" align="center" header-align="center">
        </el-table-column>
        <el-table-column
                prop="roles"
                label="角色"
                min-width="100" align="center" header-align="center">
        </el-table-column>
        <el-table-column
                prop="name"
                label="昵称"
                min-width="180" header-align="center">
        </el-table-column>
        <el-table-column
                prop="phone"
                min-width="100"
                label="电话" align="center" header-align="center">
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <div id="dianpuManagerEditDlg" class="easyui-dialog" style="width:700px; height:580px;" title="信息框" closed="true"></div>
</div>
<script>
  var dianpuManagerEditVm = new Vue({
    el: '#dianpuManager<?php echo $uniqid;?>',
    data: {
      params: JSON.parse('<?php echo addslashes($dianpu);?>'),
      managers: JSON.parse('<?php echo addslashes($manager);?>'),
      member_names: [],
      member_ids:[],
      rootManager:{
        id:0,
        name:'',
        phone:'',
        roles:'',
      },
    },
    mounted(){
      this.init();
    },
    methods: {
      init(){
        if (this.managers.length){
          for (item of this.managers){
            if (item.is_root) {
              this.rootManager.id  = item.member_id;
              this.rootManager.name = item.member.nickname;
              this.rootManager.phone = item.member.phone;
            }else{
              this.member_ids.push(item.member_id);
              this.member_names.push({id:item.member_id, name:item.member.nickname, phone:item.member.phone, roles:(item.roles?item.roles.name:'暂无角色')});
            }
          }
        }
      },
      removeMember:function (key) {
        if(this.member_ids.length > 1){
          this.member_ids.splice(key,1);
          this.member_names.splice(key,1);
        }else{
          $.messager.alert('提示','至少要保留1位店员','warning');
        }
      },
      addMember: function (){
        $("#dianpuManagerEditDlg").dialog({
          title: '添加店员',
          closed: false,
          width: 800,
          height:638,
          cache: false,
          href: '/admin/dianpuManager/getmemberlist',
          modal: true,
          buttons: [{
            text: '确定',
            id: 'dianpuManagerMastersubmit',
            iconCls: 'icon-ok',
          }, {
            text: '取消',
            iconCls: 'icon-no',
            handler: function () {
              $("#dianpuManagerEditDlg").dialog('close');
            }
          }]
        });
      },
      submit: function(){
        return;
        this.params.member_ids = this.member_ids;
        $.post('/admin/dianpu/manager', this.params, function(data){
          if(data.ret===0){
            $.messager.show({
              title:'提示',
              msg:data.msg,
              timeout:3000,
              showType:'slide'
            });
            $('#<?php echo $uniqid;?>').form('clear');
            $("#dianpuManagerDlg").dialog('close');
            dianpuManagerReload();
          }else{
            $.messager.alert('提示',data.msg,'warning');
          }
        });
      }
    }
  });
  $('#dianpuManagersubmit').click(function(data){
    dianpuManagerEditVm.submit();
  })
</script>
<style>
  .zindex_popper{
    z-index: 20000 !important;
  }
  .dianpuManager .el-row{
    border-width: 0px 1px 1px 1px;
    border-color: #EFEFEF;
    border-style: solid;
    font-size: 14px;
    line-height: 26px;
    padding: 10px 0;
  }

  .dianpuManager .el-row:first-child{
    border-width: 1px;
  }

  .dianpuManager .el-row .el-col:first-child {
    text-align: right;
    font-weight: bold;
  }
  .dianpuManager .el-row .el-col:last-child {
    text-align: left;
  }
</style>